<template>

    <div class="login-div">
        <div class="login-title">
            E充后台管理系统
        </div>
        <div class="login-div1">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="user" status-icon label-width="auto"
                class="demo-ruleForm">

                <el-form-item>
                    <el-input prefix-icon="Avatar" v-model="user.userName" style="width: 240px"
                        placeholder="请输入账号" />
                </el-form-item>
                <el-form-item>
                    <el-input prefix-icon="Lock" v-model="user.password" type="password" autocomplete="off"
                        placeholder="请输入密码" />
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="login()">
                        登录
                    </el-button>
                    <el-button @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="login-footer">

        </div>
    </div>

</template>
<script setup>
import { ref } from 'vue'
import { Login } from '@/api/staff.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
// 创建一个用户
const user = ref({ userName: "", password: "" })



const router = useRouter();
function login() {
    if (user.value.userName == "") {
        ElMessage({
            message: '用户名为空',
            type: 'warning'
        });
        return
    }
    if (user.value.password == "") {
        ElMessage({
            message: '密码为空',
            type: 'warning'
        });
        return
    }

    Login(user.value)
        .then(res => {
            if (res.data.code == 200000) {
                localStorage.setItem("token", res.data.data.token);
                localStorage.setItem("userInfo", JSON.stringify(res.data.data));
                router.push("/admin");
            } else {
                //错误提示框
                ElMessage({
                    message: res.data.msg,
                    type: 'warning'
                });
            }
        })
}

function reset(){
    user.value.password='';
    user.value.userName='';
}
</script>


<style scoped>
.login-div {
    align-items: center;
    height: 100vh;
    text-align: center;
}

.custom-alert {
    color: crimson;
    font-size: smaller;
}

.login-title {
    padding-top: 100px;
    text-align: center;
    font-size: 50px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: rgb(214, 128, 22);
    background-color: #f5f5f5;
}

.login-div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    text-align: center;
    /* 设置 div 的高度为视口的高度 */
    background-color: #f5f5f5;
}

.login-footer {
    height: 100vh;
    background-color: #f5f5f5;
}
</style>